/**
 *
 */

@import '../../../../../../../scss/common/other';

$namespace: mooc;
$collection-item-color: rgba(239, 244, 244, 1);
$tag-color: rgba(216, 39, 28, 1);

.#{$namespace}-collection-list {
  margin: 0;
  padding: 0;
}
.#{$namespace}-collection-item {
  margin: 1em 0;
  height: 10em;
  div {
    position: relative;
  }

  > div {
    @include box-sizing(border-box);
    z-index: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding: 1em 1.5em 1em 2.725em;
    background: $collection-item-color repeat 0 0 none;

    .table {
      display: table-cell;
    }
    .fixed {
      position: fixed;
    }
    .left, .right {
      position: relative;
      display: inline-block;
      z-index: 0;
      height: 8em;
    }

    .left {
      width: 9.625em;
    }

    .#{$namespace}-collection-tag {
      @include box-sizing(border-box);
      position: absolute;
      left: 0.5em;
      top: -0.6em;
      width: 1.25em;
      height: 3em;
      background: $tag-color repeat 0 0 none;
      @include box-shadow(2px, 0);

      .triangle {
        position: relative;
        width: 0;
        height: 0;
        border-width: 0.2em 0.3125em;
        border-style: solid;
        bottom: -2.2em;

        &.left {
          border-color: transparent $collection-item-color $collection-item-color transparent ;
        }

        &.right {
          border-color: transparent transparent $collection-item-color $collection-item-color;
        }
      }
    }

    .course_cover{
      width : 154px;
      height : 128px;
    }

    .#{$namespace}-collection-image {
      display: inline-block;
      vertical-align: top;
      border: 0 solid #ffffff;
      @include border-radius(5px);
    }

    a, a:hover, a:visited {
      color: inherit;
    }

    .#{$namespace}-collection-statement {
      //display: inline-block;
      margin: 0 1em;
      //width: auto;
      width: 490px;
      overflow: hidden;
      color: rgba(104, 104, 104, 1);
      > div {
        float: left;
        height: 100%;

        &.statement {
          width: 416.5px;
        }
      }
    }
    .#{$namespace}-collection-cancel {
      //display: inline-block;
      width: 4em;
      height: 100%;
      span {
        cursor: pointer;
        margin: 0;
        padding: 0;
        position: absolute;
        width: 100%;
        right: 0;
        bottom: 0;
      }
    }
  }
}